<script setup>
	import { computed, ref } from 'vue'
	import datasetApi from '@/views/plugin/dashboard/api/datasetApi'
	import dataConnectorApi from '@/views/plugin/dashboard/api/dataConnectorApi'
	import DataSetList from '@/views/plugin/dashboard/view/data/components/dataset/DataSetList.vue'
	import MysqlDataset from '@/views/plugin/dashboard/view/data/components/dataset/mysqlDataset.vue'
	import { ApiDebugger } from '@/views/plugin/dashboard/view/data/components/dataset/apiDataset'

	const selectedRowKeys = ref([])
	const mysqlDatasetRef = ref()
	const apiDebuggerRef = ref()
	const dataSetListRef = ref()
	const currentDataset = ref(null)
	const connectorInfo = ref(null)

	// 计算当前数据集组件类型
	const currentDatasetType = computed(() => {
		if (!connectorInfo.value) return 'mysql'

		const connectorType = connectorInfo.value.type
		if (['LOCAL_API', 'HTTP', 'EXTERNAL_API'].includes(connectorType)) {
			return 'api'
		}
		return 'mysql'
	})

	// 判断是否为API类型指标
	const isApiIndicator = computed(() => {
		return currentDataset.value?.type === 'api_query'
	})
	// 点击树查询
	const treeSelect = (selectedKeys) => {
		if (selectedKeys.length > 0) {
			searchFormState.value.parentId = selectedKeys.toString()
		} else {
			delete searchFormState.value.parentId
		}
		tableRef.value.refresh(true)
	}
	// 列表选择配置
	const options = {
		alert: {
			show: false,
			clear: () => {
				selectedRowKeys.value = ref([])
			}
		},
		rowSelection: {
			onChange: (selectedRowKey, selectedRows) => {
				selectedRowKeys.value = selectedRowKey
			}
		}
	}
	const toolConfig = { refresh: true, height: true, columnSetting: true }
	// 定义tableDOM
	const tableRef = ref(null)
	const searchFormRef = ref()
	const searchFormState = ref({})

	// 表格查询 返回 Promise 对象
	const loadData = async (parameter) => {
		return await datasetApi.page(Object.assign(parameter, searchFormState.value))
	}
	// 重置
	const reset = () => {
		searchFormRef.value.resetFields()
		tableRef.value.refresh(true)
	}

	// 删除
	const removeDataset = (record) => {
		let params = [
			{
				id: record.id
			}
		]
		datasetApi.delete(params).then(() => {
			tableRef.value.refresh(true)
		})
	}
	// 批量删除
	const deleteBatchOrg = (params) => {
		datasetApi.delete(params).then(() => {
			tableRef.value.clearRefreshSelected()
		})
	}
	const onDatasetSelect = (node) => {
		if (node.isLeaf) {
			searchFormState.value.parentId = node.key
			tableRef.value.refresh(true)
		} else {
			delete searchFormState.value.parentId
			tableRef.value.refresh(true)
		}
	}
	const handleLeafAction = async ({ action, node }) => {
		if (action === 'config') {
			// 设置当前数据集
			currentDataset.value = node.data

			// 获取连接器信息以确定数据集类型
			if (node.parentData && node.parentData.dataConnectorId) {
				try {
					const connectorList = await dataConnectorApi.list({ id: node.parentData.dataConnectorId })
					if (connectorList && connectorList.length > 0) {
						connectorInfo.value = connectorList[0]
					}
				} catch (error) {
					console.error('获取连接器信息失败:', error)
				}
			}

			// 根据指标类型或连接器类型决定使用哪个组件
			if (isApiIndicator.value || currentDatasetType.value === 'api') {
				apiDebuggerRef.value?.onOpen(node.data)
			} else {
				mysqlDatasetRef.value?.onOpen(node.data)
				datasetApi.querySelectedColumns({ datasetId: node.data.datasetId, indicatorId: node.data.id })
			}
		} else if (action === 'delete') {
			removeDataset(node)
		}
	}
</script>

<template>
	<div>
		<a-row :gutter="10">
			<a-col :xs="24" :sm="24" :md="24" :lg="5" :xl="4">
				<DataSetList ref="dataSetListRef" :onDatasetSelect="onDatasetSelect" @handleLeafAction="handleLeafAction" />
			</a-col>
			<a-col :xs="24" :sm="24" :md="24" :lg="19" :xl="20">
				<a-card>
					<!-- 根据指标类型或连接器类型显示不同的数据集组件 -->
					<ApiDebugger
						v-if="isApiIndicator || currentDatasetType === 'api'"
						ref="apiDebuggerRef"
						@loadData="dataSetListRef?.loadTreeData"
					/>
					<MysqlDataset v-else ref="mysqlDatasetRef" @loadData="dataSetListRef?.loadTreeData" />
				</a-card>
			</a-col>
		</a-row>
	</div>
</template>

<style scoped lang="less"></style>
